<template>
    <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>课程信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="serch">
        <el-input style="max-width: 600px" placeholder="输入搜索信息" v-model.trim="serchinfo">
            <template #prepend>
                <el-select placeholder="选择信息" v-model="select" style="width: 115px">
                    <el-option label="教室名称" value="name" />
                    <el-option label="教室编号" value="roomid" />
                    <el-option label="校区" value="region" />
                    <el-option label="教室类型" value="type" />
                </el-select>
            </template>
            <template #append>
                <el-button @click="seach"><el-icon>
                        <Search />
                    </el-icon></el-button>
            </template>
        </el-input>
    </div>
       <el-button @click="seachall">查看全部</el-button>
    <div class="data">
        <p style="margin-left:10px ;">教室信息</p>
        <el-table :data="classroom" stripe style="width: 100%">
            <el-table-column prop="name" label="教室名称" width="180" />
            <el-table-column prop="roomid" label="教室编号" width="180" />
            <el-table-column prop="type" label="教室类型" />
            <el-table-column prop="postion" label="位置" />
            <el-table-column label="教室课表" min-width="120">
                <template #default>
                    <el-button type="primary" size="small">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="120" v-if="userstore.userinfo.roleid==1">
                <template #default>
                    <el-button type="primary" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-pagination v-model:current-page="queryinfo.pagenum" v-model:page-size="queryinfo.pagesize"
        :page-sizes="[1, 2, 3, 4]" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { getclassroom, seachclassroom } from '../../apis/classroom';
import { ElMessage } from 'element-plus';
import { Userstore } from '@/stores/user.js';
const userstore =Userstore()
const serchinfo = ref<string>('')
const select = ref<string>('')
const classroom = ref([{},])
const queryinfo = ref({
    pagesize: 2,
    pagenum: 1
})
const getclassroomlist = async () => {
    const res = await getclassroom({ ...queryinfo.value })
    classroom.value = res.data.classroom
    total.value = res.data.total
}
const total = ref(0)
const handleSizeChange = (val: any) => {
    changepage()
}
const handleCurrentChange = (val: any) => {
    changepage()
}
const changepage = () => {
    if (serchinfo.value == '' || select.value == '') { getclassroomlist() }
    else {
        seachclasslist()
    }
}
const seachclasslist = async () => {
    const res = await seachclassroom({ condition: select.value, val: serchinfo.value, ...queryinfo.value })
    classroom.value = res.data.classroom
    total.value = res.data.total
}
const seach = async () => {
    if (serchinfo.value == '' || select.value == '') return ElMessage({ type: 'warning', message: '请输入搜索的值' })
    seachclasslist()
}
const seachall = () => {
    select.value = ''
    serchinfo.value = ''
    getclassroomlist()
}
onMounted(() => {
    getclassroomlist()
})
</script>
<style lang='scss' scoped>
.serch {
    margin-top: 15px;

    .el-button {
        color: #fff;
        background-color: #43a0ff;
    }
}

.data {
    margin-top: 10px;
    background-color: #fff;
}

:deep(.el-input__wrapper) {
    padding: 0;
    border-radius: 0;
}

:deep(.el-input__inner) {
    outline: 0;
    padding: 0 10px;
    border: 0;
}
</style>